<template>
  <div class="app-container">
    <el-form :inline="true"  class="demo-form-inline">
  <el-form-item label="床位ID">
    <el-input v-model="id" placeholder="请通过键盘输入床位ID"></el-input>
  </el-form-item>
  <el-form-item label="床位状态">
    <el-select v-model="status" placeholder="请通过鼠标选择床位状态">
      <el-option label="闲，" value="0"></el-option>
      <el-option label="忙" value="1"></el-option>
      <el-option label="异常" value="2"></el-option>
    </el-select>
  </el-form-item>
  <br>
  <el-form-item label="医院名称"  >
    <el-select  v-model="hosName"  placeholder="请通过鼠标选择医院名称">
      <el-option label="" v-for="hos in hospitals" :key="hos.id" :value="hos.name"></el-option>     
    </el-select>
  </el-form-item>
    <el-form-item label="医院科室">
    <el-select  v-model="hosTypeName"  placeholder="请通过鼠标选择医院科室">
      <el-option label="" v-for="dp in deptList" :key="dp.id" :value="dp.deptname"></el-option>
    </el-select>
  </el-form-item>
  <br>
  <div class="block">
    <span class="demonstration">选择时间段</span>
    <el-date-picker
      v-model="value2"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      value-format="yyyy-MM-dd hh:MM:ss"
      :picker-options="pickerOptions">
      
    </el-date-picker>

  </div>
  <br>
  <el-form-item>
    <el-button type="primary"  @click="bedList">查询</el-button>
  </el-form-item>
   <el-form-item>
     <router-link :to="'/cus/bedadd'">
    <el-button type="primary"  @click="bedList">导入床位</el-button>
      </router-link>
  </el-form-item>
        
</el-form>
    <el-table
    :data="list"
    element-loading-text="Loading"
    border
    fit
    highlight-current-row
    >
      <el-table-column align="center" label="序号" width="95">
                 
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>        
      </el-table-column>
               <el-table-column
        prop="id"
        label="床位ID"
        width="100"
      ></el-table-column>
               <el-table-column
        prop="hosName"
        label="所属医院"
        width="250"
      ></el-table-column>
               <el-table-column
        prop="hosTypeName"
        label="所属科室"
        width="150"
      ></el-table-column>
               <el-table-column
        prop="bedCode"
        label="床位编号"
        width="150"
      ></el-table-column>
               <el-table-column
        prop="status"
        label="床位状态"
        width="150"
      ></el-table-column>
      <el-table-column
        prop="addTime"
        label="录入时间"
        width="150"
      ></el-table-column>
      <el-table-column label="操作">
               
        <template slot-scope="scope">
          <router-link :to="'/cus/bedmessage/'+scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit"
              >详情</el-button>
          </router-link>
                             
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            @click="deleteOne(scope.row)"
            >删除</el-button
          >
                 
        </template>
</el-table-column>
    </el-table>
<el-pagination
      background
      layout="prev,pager,next,sizes,jumper,->,total"
      :total="total"
      :page-sizes="pagelist"
      :page-size="limit"
      :current-page="page"
      @current-change="currentChange"
      @size-change="sizeChange"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data(){
    return{
      list:[],
      url:'http://localhost:8080/jiapei/bed/bed',
      page:1,
      limit:3,
      pagelist:[2,3,15,20],
      total:0,
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value2:'',
        id:'',
        status:'',
        hosName:'' ,
        hosTypeName:'',
        hospitals:[],
        deptList:[]
    }
  },
  mounted(){
    this.bedList();
  },
  methods:{
    bedList(){
      this.$axios({
        method:'GET',
        params:{
          page:this.page,
          limit:this.limit,
          value3:this.value2[0],
          value4:this.value2[1],
          id:this.id,
          status:this.status,
        hosName:this.hosName,
        hosTypeName:this.hosTypeName
        },
        url:this.url
      }).then(res=>{
        this.deptList=res.data.data.deptList;
        this.hospitals=res.data.data.hospitals;
        
        this.total=res.data.data.total;
        this.list=res.data.data.list; 
      })
    },
    currentChange(p){
      this.page=p;
      this.bedList();
    },
sizeChange(size) {
      this.limit = size;
      this.bedList();
    },
    // deleteOne(row){
    //     this.$axious.delete(`http://localhost:8080/jiapei/bed/bed${row.id}`).then(res=>{
    //        if (res.data.code == 200) {
    //         this.$message("保存成功");
    //         this.$router.push('/cus/bedlist');
    //         }
    //     })
    // }
    deleteOne(row){
       this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then((res) => {
        this.$axios({
          method: "DELETE",
          url: `http://localhost:8080/jiapei/bed/bed/${row.id}`,
        }).then((res) => {
          if (res.data.code == 200) {
            this.$message("删除成功");
             this.page=1;
            this.bedList();
          }
        });
      });
    }
  }
}
</script>

<style>

</style>